<template>
	<view :style="{ paddingTop: systemInfo.statusBarHeight + systemInfo.titleBarHeight + 'px' }">
		<title-bar :back="true" title="上香记录"></title-bar>
		<view class="page-content common-page-content" :style="{ minHeight: systemInfo.minHeight }">
			<view class="record-item" v-for="(item, index) in dataList" :key="index">
				<view class="item-info-layout">
					<view class="top-layout">
						<view class="image-layout">
							<image class="item-img" :src="memberHeader(item.member)"></image>
							<image mode="aspectFit" class="item-bg"></image>
						</view>
						<view class="info-layout">
							<text class="name-text">{{ item.member.nickName }}</text>
							<view class="time-layout">
								<view>上香时间：{{ item.createTime }}</view>
								<view>到期时间：{{ moment(moment(item.createTime).add(item.num, 'days')).format('YYYY-MM-DD HH:mm:ss') }}</view>
							</view>
						</view>
					</view>
					<view class="divider"></view>
					<view class="bottom-layout">
						<text>{{ item.member.nickName + ' 在 ' + moment(item.createTime).fromNow() + '到此为逝者上香祭拜' }}</text>
					</view>
				</view>
			</view>
			<empty-layout v-if="loadingType === 'empty'" :option="{ tip: '暂无祭拜记录，快去为逝者上香祭拜吧~' }"></empty-layout>
			<uni-load-more v-if="dataList.length > pageSize" :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
import mixin from '@/pages/common/mixins/memorial-hall.js';
import emptyLayout from '@/components/empty-layout/empty-layout.vue';

export default {
	mixins: [mixin],
	components: {
		emptyLayout
	},
	data() {
		return {
			type: 1,
			hallId: undefined,
			loadingType: 'more',
			pageNum: 1,
			pageSize: 10,
			dataList: []
		};
	},
	methods: {
		/* 会员头像 */
		memberHeader(item) {
			if (item.headPortrait) {
				return item.headPortrait.indexOf('http') != -1 ? item.headPortrait : this.imageUrl + item.headPortrait;
			}
			return '';
		},
		/* 加载祭奠记录 */
		loadData() {
			let url = '';
			let param = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				orderByColumn: 'create_time',
				isAsc: 'desc'
			};
			if (this.type == 1) {
				url = '/incense-record/list';
				param.hallId = this.hallId;
			} else {
				url = '/ancestral-hall/incense-record/list';
				param.ancestralHallId = this.hallId;
			}
			this.$http.get(url, { params: param }).then(res => {
				if (res.code === 200) {
					if (this.pageNum == 1) {
						this.dataList = [];
					}
					this.dataList = this.dataList.concat(res.rows);
					if (this.dataList.length === 0) {
						this.loadingType = 'empty';
					} else if (this.dataList.length === Number(res.total)) {
						this.loadingType = 'nomore';
					} else {
						this.loadingType = 'more';
					}
				}
			});
		},
		/* 刷新加载 */
		refresh() {
			this.pageNum = 1;
			this.loadingType = 'more';
			this.loadData();
		}
	},
	onReachBottom() {
		if (this.loadingType === 'more') {
			this.pageNum++;
			this.loadingType = 'loading';
			this.loadData();
		}
	},
	onPullDownRefresh() {
		this.pageNum = 1;
		this.loadingType = 'more';
		this.loadData();
	},
	onLoad(data) {
		this.type = data.type;
		this.hallId = data.hallId;
		this.loadData();
	}
};
</script>

<style lang="scss" scoped>
@import './incense-record.scss';
</style>
